﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户登录表单验证js提示代码</title>

    <style>
        * { margin: 0; padding: 0; font-family: "微软雅黑"; font-size: 12px; }

        .box { width: 390px; height: 320px; border: solid 1px #ddd; background: #FFF; position: relative; left: 50%; top: 30%; margin-left: -195px; margin-top: 120px; }

            .box h2 { font-weight: normal; color: #666; font-size: 16px; line-height: 46px; height: 46px; overflow: hidden; text-align: center; border-bottom: solid 1px #ddd; background: #f7f7f7; margin-top: 0px; }

        .input_box { width: 350px; padding-bottom: 15px; margin: 0 auto; overflow: hidden; }

            .input_box input { float: left; width: 348px; height: 40px; font-size: 14px; border: solid 1px #ddd; text-indent: 10px; outline: none; line-height: 40px; }

            .input_box button { width: 350px; height: 48px; background: #3f89ec; border: none; border-radius: 2px; outline: none; cursor: pointer; font-size: 16px; color: #FFF; }

        #error_box { height: 40px; width: 350px; margin: 0 auto; line-height: 40px; color: #fc4343; }
    </style>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
//长度必须在6~20位之间
//开头不能为数字
//只能包含小写字母和数字
//数字：48~57
//小写字母：97~122
//innerHTML
function fnLogin(){
	var oUname = document.getElementById("username");
	var oUpass = document.getElementById("password");
	var oError = document.getElementById("error_box");
	var isNotError = true;
	if(oUname.value.length > 20 || oUname.value.length < 6){
		oError.innerHTML = "用户名长度必须在6~20位之间";
		isNotError = false;
		return;

	}else if(oUname.value.charCodeAt(0) >= 48 && oUname.value.charCodeAt(0) <= 57){
		oError.innerHTML = "用户名开头不能为数字";
		isNotError = false;
		return;
	}else{
		for(var i=0; i<oUname.value.length; i++){
			if((oUname.value.charCodeAt(i) > 122 || oUname.value.charCodeAt(i) < 97) && (oUname.value.charCodeAt(i) > 57 || oUname.value.charCodeAt(i) < 48)){
				oError.innerHTML = "用户名只能包含小写字母和数字";
				isNotError = false;
				return;
			}
		}
	}
	if(oUpass.value.length > 20 || oUpass.value.length < 6){
		oError.innerHTML = "密码长度必须在6~20位之间";
		isNotError = false;
		return;
	}


    var username = $.trim($("#username").val());
    var password = $.trim($("#password").val());
    if (username == "") {
        alert("请输入用户名");
        return false;
    } else if (password == "") {
        alert("请输入密码");
        return false;
    }
    //ajax去服务器端校验
    var data = { username: username, pwd: password };

    $.ajax({
        type: "POST",
        url: "/Login/Login",
        data: data,
        dataType: 'json',
        success: function (msg) {
            console.log(msg);
            alert(JSON.stringify(msg));
            if (msg.Success == true) {
               oError.innerHTML = "登录成功";
               window.location.href = "/User";
            } else {
                alert("登录失败，请重试!");
            }
        }
    });
}
    </script>
</head>
<body>

    <div class="box">
        <h2>登录</h2>
        <div id="error_box"></div>
        <div class="input_box">
            <input type="text" placeholder="请输入账户名" id="username" />
        </div>
        <div class="input_box">
            <input type="password" placeholder="请输入密码" id="password" />
        </div>
        <div class="input_box">
            <button onclick="fnLogin()">登录</button>
        </div>
    </div>


</body>
</html>